import React from 'react';
import { View, StyleSheet, ViewStyle, ViewProps } from 'react-native';
import { useTheme } from './theme/ThemeContext';

interface ThemedViewProps extends ViewProps {
  style?: ViewStyle;
  variant?: 'primary' | 'secondary' | 'card';
}

export function ThemedView({
  style,
  variant,
  ...props
}: ThemedViewProps) {
  const { theme } = useTheme();

  const getViewStyle = () => ({
    ...styles.base,
    backgroundColor: variant === 'card' 
      ? theme.colors.card 
      : variant === 'secondary'
        ? theme.colors.secondary
        : theme.colors.background,
    ...style,
  });

  return (
    <View style={getViewStyle()} {...props} />
  );
}

const styles = StyleSheet.create({
  base: {
    borderRadius: 8,
  },
});
